<template>
	<uni-nav-bar title="兑换记录" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package_sale datas" style="padding:10rpx;">
		<uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
			@change="change" />
	</view>
	<!-- 切换 -->
	<view class="package_sale datas" style="padding:0rpx;">
		<z-tabs ref="tabs" :list="list" :current="current" @change="tabsChange" inactive-color="#333" />
	</view>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<view class="package_sale" style="padding:20rpx;" v-for="(item,index) in orderLists"
			:style="{marginTop:index==0?'0px':'15rpx'}" :key="item.id">
			<view class="space-between" v-for="items in item.goods_list" style="margin-bottom: 20rpx;"
				:key="items.goods_id">
				<image :src="items.image" mode=""></image>
				<view style="width:75%">
					<view class="space-between title">
						{{items.name}}
					</view>
					<view class="space-between top">
						<view v-if="items.type==='gem'" style="font-size: 26rpx;color:#5097FB;">
							蓝宝石
							<text style="font-size: 38rpx;margin-left: 10rpx;">{{items.score}}</text>
						</view>
						<view v-else style="font-size: 26rpx;color:#FE3B2E;">
							钱包价格:<text style="font-size: 24rpx;">￥</text>
							<text style="font-size: 38rpx;margin-left: 10rpx;">{{items.money}}</text>
						</view>
						<view style="color: #666;">x{{items.nums}}</view>
					</view>
				</view>
			</view>
			<view class="space-between">
				<view>订单号</view>
				<view>{{item.order_sn}}</view>
			</view>
			<view class="center top" @click="changeShow(item.id)">
				<view>查看更多订单信息</view>
				<uni-icons :type="showID===item.id?'bottom':'top'" size="22" style="margin-left: 10rpx;"></uni-icons>
			</view>
			<view style="color:#666;" v-if="showID===item.id">
				<!-- 	<view class="space-between top">
					<view>订单号</view>
					<view>{{item.order_sn}}</view>
				</view> -->
				<view class="space-between top">
					<view>提货数量</view>
					<view>x{{item.nums}}</view>
				</view>
				<view class="space-between top">
					<view>消耗蓝宝石</view>
					<view>{{item.order_score}}</view>
				</view>
				<view class="space-between top">
					<view>消耗钱包余额</view>
					<view>{{item.order_money}}</view>
				</view>
				<view class="space-between top">
					<view>提货方式</view>
					<view>{{item.delivery_type}}</view>
				</view>
				<view class="space-between top">
					<view>提货时间</view>
					<view>{{item.updatetime}}</view>
				</view>
			</view>
			<view v-if="current==0" class="center" style="justify-content: flex-end;width:100%;">
				<view style="margin-right: 40rpx;" @click="del(item.id)">取消兑换</view>
				<view class="but" @click="inspect(item.code_image,item.store_info,item.id)">查看兑换码</view>
			</view>
		</view>
		<Popu v-if="orderLists.length<1" :pageHeight="pageHeight" text="暂无兑换记录"></Popu>
	</scroll-view>
	<!-- 实体商品发货 -->
	<ExchangePop ref="exchange" @submit="tabsChange(1)" :type="1"></ExchangePop>
</template>

<script setup lang="ts">
	import { navBack } from '@/utils/navigator';
	import { ref } from 'vue';
	import { format, subDays } from 'date-fns';
	import ExchangePop from '@c/mine/exchangePop.vue';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { showLoading, errorToast,successToast } from '@/utils/prompt';
	import { getDuihuanLogList } from '@/gql/integral';
	import { toPublish } from '@mqtt';
	import { getDriverID } from '@/stores/driverID';
	import { useUserStore } from '@/stores/user';
	const driver_id = getDriverID();
	const userInfo = useUserStore();
	// data
	const now = new Date();
	let end = format(now, 'yyyy-MM-dd');
	const daysAgo = subDays(now, 6);
	let start = format(daysAgo, 'yyyy-MM-dd');
	const range = ref([start, end]);

	const orderLists = ref([]);
	const lastPage = ref(1);
	const currentPage = ref(1);
	const pageHeight = ref();
	const showID = ref()

	const list = [{ name: '未领取' }, { name: '已领取' }, { name: '已取消' }]
	const current = ref(0)
	const tabs = ref(null)
	const exchange = ref(null)
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = (res.windowHeight - 160);
		},
	});
	init()
	function init() {
		const payload = {
			query: getDuihuanLogList,
			variables: {
				page: currentPage.value,
				start,
				end,
				driver_id,
				status: current.value==2?4:current.value,
			},
		};
		toPublish(
			'ql/score/getDuihuanLogList',
			payload,
			(obj : any) => {
				const { getDuihuanLogList } = obj.data;
				orderLists.value = [...orderLists.value, ...getDuihuanLogList.list];
				lastPage.value = getDuihuanLogList.lastpage;
			}
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			init();
		}
	}
	/**
	 * 赛选时间段
	 * @param currentPage  当前获取加注页数
	 * @param orderLists  清空加注订单列表
	 * @param start  赛选开始时间
	 * @param end  赛选结束时间
	 * @return 再次获取加注订单
	 */
	function change([sta, en]) {
		currentPage.value = 1;
		orderLists.value = [];
		start = sta;
		end = en;
		init();
	}
	//tabs通知swiper切换
	function tabsChange(index : number) {
		current.value = index;
		currentPage.value = 1;
		orderLists.value = [];
		init();
	}
	function changeShow(id : number) {
		if (showID.value != id) {
			showID.value = id
		} else {
			showID.value = 0
		}
	}
	function inspect(img : string, data : any, id : number) {
		exchange.value.censor(img, data, id)
	}
	//取消兑换
	function del(id : number) {
		showLoading()
		const payload = {
			id,
			driver_id,
		};
		toPublish(
			'score/tuiScoreOrder',
			payload,
			(obj : any) => {
				const { code, msg } = obj;
				if (code === 1) {
					userInfo.gemstone()
					userInfo.getUserInfo()
					successToast(msg)
					orderLists.value = orderLists.value.filter((item) => item.id == id ? item = null : item)
				} else {
					errorToast(msg)
				}
			}
		);
	}
</script>

<style scoped lang="less">
	image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 5px;
	}

	.top {
		margin-top: 20rpx;
	}

	.title {
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.but {
		width: 220rpx;
		height: 68rpx;
		background: linear-gradient(-66deg, #FF7B48, #FF5B45);
		border-radius: 5px;
		text-align: center;
		line-height: 68rpx;
		color: #fff;
	}
</style>
<style>
	.datas>>>.uni-input-input {
		font-size: 32rpx !important;
	}

	.datas>>>.uni-date-x {
		font-size: 30rpx !important;
	}

	.datas>>>.uni-icons {
		font-size: 48rpx !important;
	}
</style>